<template>
  <div id="tagManageTop">
    <h1 class="con-right-title">
      标签推荐
    </h1>
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="标签属性" prop="labelProperty">
          <el-select
            v-model="formInline.labelProperty"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in labelPropertyList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="频道" prop="channel">
          <el-select
            v-model="formInline.channel"
            :disabled="formInline.labelProperty === 'HIDING_TAG'"
            placeholder="请选择"
          >
            <el-option
              v-for="item in channelList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推荐状态" prop="enabled">
          <el-select
            v-model="formInline.enabled"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="item in enabledList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签操作员" prop="operationUserId">
          <el-select
            v-model="formInline.operationUserId"
            filterable
            :disabled="noChoose"
            clearable
          >
            <el-option
              v-for="(item, index) in checkUserIdList"
              :key="'item' + index"
              :label="item.nickname"
              :value="item.dapengUserId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="labelName">
          <el-input
            v-model="formInline.labelName"
            placeholder="请输入关键词搜索"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="toSearch('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getDpNum } from '@/api/system/user'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'TagManageTop',
  msg: '标签管理-顶部搜索',
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          labelProperty: '', // 标签属性
          channel: '', // 频道
          enabled: '', // 推荐状态
          labelName: '', // 标签名称
          operationUserId: '' // 标签操作员
        }
      }
    }
  },
  computed: {
    dapengUserId() {
      return this.$store.state.user.dapengUserId
    },
    // isAdmin() {
    //   return this.$store.state.user.isAdmin
    // },
    isAdmin() {
      return JSON.parse(localStorage.getItem('userInfo')).isAdmin
    },
    // noChoose() {
    //   //标签操作员，是否为可操作状态：非主管 && 隐性标签，不可操作
    //   return (
    //     !this.$store.state.user.isAdmin &&
    //     this.formInline.labelProperty === 'HIDING_TAG'
    //   )
    // }
    noChoose() {
      //标签操作员，是否为可操作状态：非主管 && 隐性标签，不可操作
      return (
        !JSON.parse(localStorage.getItem('userInfo')).isAdmin &&
        this.formInline.labelProperty === 'HIDING_TAG'
      )
    }
  },
  data() {
    return {
      content: '', //输入内容
      // 标签操作员
      checkUserIdList: [{ nickname: '全部', dapengUserId: '' }],
      labelPropertyList: [], // 标签属性
      channelList: [], //频道
      enabledList: [{ dictLabel: '全部', dictValue: '' }], //推荐状态
      rules: {
        labelProperty: {},
        channel: {},
        enabled: {},
        labelName: {},
        operationUserId: {}
      }
    }
  },
  watch: {
    'formInline.labelProperty': {
      handler(newV, oldV) {
        if (newV === 'HIDING_TAG') {
          //隐性标签，没有频道
          this.formInline.channel = ''
          if (!this.isAdmin) {
            this.formInline.operationUserId = this.dapengUserId
          }
        } else {
          //显性标签，有频道
          this.formInline.channel = this.channelList[0].dictValue
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getStatu()
    this.getCheckUser()
  },
  methods: {
    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('toSearch')
        } else {
          return false
        }
      })
    },
    /* 获取数据状态 */
    async getStatu() {
      // 标签属性
      let data1 = await sysNormalDisable('sys_labels_attribute', 'labelsAttr')
      this.labelPropertyList = this.labelPropertyList.concat(data1)
      // 频道
      let data2 = await sysNormalDisable('sys_topic_channel', 'topicChannel')
      this.channelList = this.channelList.concat(data2)
      // 推荐状态
      let data3 = await sysNormalDisable('sys_labels_statu')
      this.enabledList = this.enabledList.concat(data3)
      //设置默认数据
      this.setDefaultValue()
      //触发获取列表
      this.$emit('toSearch')
    },
    /*设置默认数据*/
    setDefaultValue() {
      this.formInline.labelProperty = this.labelPropertyList[0].dictValue
      this.formInline.channel = this.channelList[0].dictValue
    },
    getCheckUser() {
      getDpNum({ type: 'OPERATORS' }, (response) => {
        this.checkUserIdList = this.checkUserIdList.concat(response)
      })
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
      //设置默认数据
      this.setDefaultValue()
    }
  }
}
</script>

<style lang="less">
#tagManageTop {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
  .el-input.el-input--suffix {
    .el-input__inner {
      padding-right: 25px !important;
    }
  }
}
</style>
